import React from 'react'
import '../assets/css/order.css'
import { NavBar, Ellipsis } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
// 引入图片
import cart from '../assets/images/购物车.png'
function Home() {
    const Navigate = useNavigate()
    function Back() {
        Navigate(-1)
    }
    return (<div>
        {/* 头部 */}
        <div className='header'>
            {/* 头部标题 */}
            <NavBar onBack={() => Back()}>确认订单</NavBar>
            <div className='H'></div>
            <div className="message">
                <p>
                    <span>代用名</span>
                    <span>188 **** 8888</span>
                </p>
                <p>
                    北京 北京市 昌平区
                </p>
                <p>
                    朱辛庄中公教育实训基地IT教学楼 2号楼 2202室
                </p>
            </div>
        </div>
        <div className="body">
            {/* 占位块 */}
            <div className='placehold'></div>
            {/* 品牌精选 */}
            <div className="brand">
                <div>
                    <img src={cart} alt="" />
                    <p>品牌精选</p>
                </div>
                <div>
                    <span>已免运费 </span>|
                    <span> 领券</span>
                </div>
            </div>
            {/* 商品列表 */}
            <ul className='list11'>
                <li className="shoplist">
                    <div>
                        <img src={cart} alt="" />
                    </div>
                    <div className='list_right'>
                        <div>
                            <button className='time'>限时</button>
                            <Ellipsis direction='end' content={'我打球无多'} />
                        </div>
                        <Ellipsis direction='end' content={'我打球无多'} />
                        <div className='nowPrice'>
                            ￥<span>99.99</span>
                            <span><s>￥1099</s></span>
                        </div>
                        <div className='pay'>
                            <button>七天无理由退货</button>
                            <button>特价</button>
                        </div>
                        <p className='num'>X1</p>
                    </div>
                </li>
              
              
            </ul>

            {/* 商品发票/说明 */}
            <ul className='illustrate'>
                <li>
                    <span>发票类型</span>
                    <span>不开发票&gt;</span>
                </li>
                <li>
                    <span>售后免邮</span>
                    <span>部分商家赠送</span>
                </li>
                <li>
                    <span>买家留言</span>
                    <span>填写内容需要与商家协商并确认,45字以内</span>
                </li>
            </ul>

            {/* 优惠券 */}
            <ul className='illustrate preferential'>
                <li>
                    <span>商品金额</span>
                    <span>&yen;1998</span>
                </li>
                <li>
                    <span>优惠活动</span>
                    <span>-&yen;200</span>
                </li>
                <li>
                    <span>优惠券</span>
                    <span>暂无可用&gt;</span>
                </li>
            </ul>

           
        </div> 
        {/* 合计价格*/}
            <div className="allPrice">
                <div className="computed">
                    <span>合计</span>
                    <span>&yen;12998.35</span>
                </div>
                <div className='favourable'>
                    <span>已免运费</span>
                    <span>已优惠&yen;200元</span>
                </div>
                <button className='goPay'>
                    立即支付
                </button>
            </div>
    </div>)
}
export default Home